<template>
  <div>
    <el-row>
      <el-steps :active="0" finish-status="process" align-center>
        <el-step title="校验邮箱"></el-step>
        <el-step title="密码更新"></el-step>
        <el-step title="修改成功"></el-step>
      </el-steps>
    </el-row>
    <el-form :model="formData" :rules="rule" ref="form">
      <el-row style="margin-top: 40px">
        <el-col :span="6" :offset="1" style="font-size: 22px; margin-top: 5px;color: #a79f9f;"
        >邮箱:
        </el-col>
        <el-col :span="11">
          <el-form-item prop="email">
            <el-input
              type="email"
              v-model="formData.email"
              readonly="readonly"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="5" :offset="1" style="font-size: 22px; margin-top: 5px;color: #a79f9f;"
        >验证码:
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item prop="valid">
            <el-input type="text" v-model="formData.valid"/>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button type="primary" @click="sendEmail"
          ><i class="el-icon-s-promotion el-icon--left"></i
          >发送邮件
          </el-button
          >
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col>
          <el-button type="primary" @click="Go"
          ><i class="el-icon-right el-icon--left"></i>下一步
          </el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    let check = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else if (value !== this.validate) {
        callback(new Error('验证码错误!'))
      } else {
        callback()
      }
    }
    return {
      rule: {
        valid: [
          {
            required: true,
            validator: check,
            trigger: 'blur'
          },
        ],
      },
      formData: {
        email: '',
        valid: '',
      },
      validate: '',
    }
  },
  methods: {
    Go: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$router.push({ path: 'updateStepTwo' })
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: '验证码错误',
            center: true,
          })
        }
      })
    },
    sendEmail () {
      this.$http({
        method: 'post',
        url: '/api/common/email/' + this.formData.email,
      }).then((res) => {
        if (res.data.code === 5050) {
          this.validate = res.data.result
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: res.data.message,
            center: true,
          })
        }
      })
    },
  },
  created () {
    let email = this.$store.state.user.email
    if (email != null && email !== '') {
      this.formData.email = email
    } else {
      this.$message({
        type: 'error',
        showClose: true,
        message: '无邮箱信息！请检查是否填写个人信息',
        center: true,
        duration: 2000,
        onClose: () => {
          this.$router.push('/details')
        },
      })
    }
  },
}
</script>

<style>


</style>
